<template>
    <div>
    <main>
        <div class="title">
            <h1>{{post.title}}</h1>
        </div>
        <div class="postuser">
            <img :src="postuser.avatar" class="postavatar">
            <div>{{postuser.username}}</div>
        </div>

        <div >
            <img v-show="disabled" :src="post.image" class="img">
        </div>
        <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
        <div class="content markdown-body" v-html="post.content">
            656666666666
        </div>
        <el-divider content-position="left">帖子回复</el-divider>
        <div class="comment">
            <el-card class="box-card" v-for="dic in listcom">
                <el-avatar shape="square" class="avatar" size="medium" :src="dic.useravatar"></el-avatar>
                <div>{{dic.username}}</div>
                <div  class="text">
                    {{dic.content}}
                </div>
                <div>
                    <el-button class="rpbt" @click="reply(dic),replyform=true" type="text" :disabled="btn">回复这帖子</el-button>
                </div>

            </el-card>
            <el-button class="rp" type="success"  @click="dialogFormVisible = true" :disabled="btn">发起回复</el-button>
        </div>
    </main>
        <div class="post" v-show="hasLogin">
            <el-image class="image"
                      style="width: 120px; height: 120px"
                      :src="user.avatar"
            >
            </el-image>
            <el-divider><i class="el-icon-edit"></i></el-divider>
            <h4>我的帖子发布数：{{user.postnumber}}</h4>
            <el-button class="bt" type="primary" plain @click="addpost" >发布帖子</el-button>
            <br>
            <el-button class="bt" plain @click="mypost()">我的帖子</el-button>
            <br>
            <el-button  class="bt" @click="mycomment()" plain>我的评论</el-button>
        </div>

        <el-dialog title="帖子回复"  :visible.sync="dialogFormVisible">
            <el-form :model="comment" status-icon  ref="comment" :rules="rules">
                <el-form-item label="回复内容" label-width="100px" prop="content">
                    <el-input type="textarea" v-model="comment.content" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户名" style="display: none" label-width="100px">
                    <el-input  v-model="comment.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户头像" style="display: none" label-width="100px">
                    <el-input  v-model="comment.useravatar" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="父级评论" style="display: none" label-width="100px">
                    <el-input  v-model="comment.parentid" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="帖子id" style="display: none" label-width="100px">
                    <el-input  v-model="comment.postid" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false,submit('comment')">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="回复帖子"  :visible.sync="replyform">
            <el-form :model="comment" status-icon  ref="comment" :rules="rules">
                <el-form-item label="回复用户" label-width="100px" prop="content">
                    <div class="parent">{{comment.parentuser}}</div>
                    <el-input type="textarea" v-model="comment.content" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户名" style="display: none" label-width="100px">
                    <el-input  v-model="comment.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户头像" style="display: none" label-width="100px">
                    <el-input  v-model="comment.useravatar" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="父级评论" style="display: none" label-width="100px">
                    <el-input  v-model="comment.parentid" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="帖子id" style="display: none" label-width="100px">
                    <el-input  v-model="comment.postid" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="父级帖子id" style="display: none" label-width="100px">
                    <el-input  v-model="comment.parentuser" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户id" style="display: none" label-width="100px">
                    <el-input  v-model="comment.uuid" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="replyform = false">取 消</el-button>
                <el-button type="primary" @click="replyform = false,submit('comment')">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
    import 'github-markdown-css/github-markdown.css' // 然后添加样式markdown-body
    export default {
        name: "showpost",
        data(){
            return{
                replyform:false,
                dialogFormVisible: false,
                hasLogin:false,
                disabled:true,
                btn:true,
                post:{
                    content:"",
                    image:"",
                    title:'',

                },
                postuser:{
                    username:"",
                    avatar:"",
                },
                user:{
                    avatar:'https://www.gdpu.edu.cn/images/xh.png',
                    uuid:'',
                    postnumber:'',
                },
                listcom:
                    [
                    {
                        useravatar:'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
                        username:'用户名',
                        content:'内容',
                    }
                ],
                comment:{
                    username:'',
                    useravatar:'',
                    parentid:'',
                    postid:'',
                    parentuser:'',
                    uuid:''
                },
                rules:{
                    content:[
                        { required: true, message: '请输入评论内容', trigger: 'blur' },
                        { min: 6, max: 50, message: '长度在 10 到 50 个字符', trigger: 'blur' }
                    ]
                }
            }
        },
        created() {
            const _this = this
            _this.comment.postid = this.$route.query.id
            axios.get("http://localhost:8181/forum/findPostbyid/"+this.$route.query.id).then(function (resp) {
                _this.post = resp.data.data
                console.log(_this.article)
                var MarkdownIt = require('markdown-it'),
                    md = new MarkdownIt();
                var result = md.render(_this.post.content);
                _this.post.content = result
                _this.postuser.username = _this.post.username
                if (_this.post.image===""){
                    _this.disabled = false
                }
            })
            axios.get("http://localhost:8181/user/findbyid/"+this.$route.query.userid).then(function (resp) {
                _this.postuser = resp.data.data
                console.log(_this.postuser)
            })
            axios.get("http://localhost:8181/comment/findcommentbyid/"+this.$route.query.id).then(function (resp) {
                _this.listcom = resp.data.data
                console.log(_this.listcom)
            })

            if(this.$store.getters.getUser.username) {
                this.user.username = this.$store.getters.getUser.username
                this.user.avatar = this.$store.getters.getUser.avatar
                this.user.uuid = this.$store.getters.getUser.id
                this.user.postnumber = this.$store.getters.getUser.post
                this.comment.username = this.$store.getters.getUser.username
                this.comment.useravatar = this.$store.getters.getUser.avatar
                this.comment.uuid = this.$store.getters.getUser.id
                _this.hasLogin = true
                _this.btn = false
            }

        },
        methods:{
            addpost(){
                this.$router.push({
                    path: '/addPost',
                })
            },
            reply(dic){
                const _this = this
                _this.comment.parentid = dic.id;
                _this.comment.parentuser = dic.username;

            },
            submit(formName) {
                console.log(formName);
                const _this = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post("http://localhost:8181/comment/add",this.comment).then(function (resp) {
                            if (resp.data.msg == 'success'){
                                _this.$message({
                                    message: '评论成功！',
                                    type: 'success'
                                });
                                window.location.reload()
                            }else {
                                _this.$message("你的用户名已被注册");
                            }

                        });

                    } else {

                        return false;
                    }
                });
            },
            mypost(){
                this.$router.push({
                    path: '/selfcenter',
                    query: {
                        activeName:"post"
                    }
                })
            },
            mycomment(){
                this.$router.push({
                    path: '/selfcenter',
                    query: {
                        activeName:"comment"
                    }
                })
            },
        }
    }
</script>

<style scoped>
    main{
        width: 700px;
        height: 900px;
        margin-top: 20px;
        margin-left: 100px;
    }
    .title{
        height:20px;
        line-height:20px;
        text-align: left;
        margin-left: 20px;
        font-family:"Microsoft YaHei" !important;
        font-size:20px !important;
    }
    .content{
        /*height: 30%;*/
        width: 100%;
    }
    .postuser{
        margin-top: 20px;
        height:50px;
        line-height:50px;
        text-align: left;
        margin-left: 20px;
    }
    .postuser div{
        margin-left: 20px;
        float: left;
    }
    .postavatar{
        float: left;
        width: 50px;
        height: 50px;
    }
    .img{

        margin-top: 20px;
        width: 60%;
        height: 200px;
    }
    .post{
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 80px;
        top: 135px;
        background-color: rgba(94, 255, 174,0.2);
        width: 300px;
        height: 500px;
        box-shadow: 0px 15px 10px -15px rgb(74, 131, 131);
        border-radius: 10px;
    }
    .image{
        margin-top: 20px;
    }
    .bt{
        margin: 10px !important;
    }
    .box-card {
        padding: 0;
        width: 100%;
        margin-top: 10px;
    }
    .avatar{
        float: left;
    }
    .box-card div{
        margin-left: 20px;
        line-height: 30px;
        float: left;
        text-align: center;
        font-size: 18px;
    }
    .box-card .text {
        float: left;
        font-size: 14px;
        margin-left: 40px;
        padding: 10px 0;
        width: 100%;
        text-align: start;
    }
    .box-card .rpbt{
        float: right;
        line-height: 20px;
        cursor: pointer;
    }
    .comment .rp{
        margin-top: 10px;
        float: right;
    }
    .parent{
        float: left;
        font-size: 20px;
        font-weight: 800;
    }

</style>